<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
// startTime = +new Date();
// min: startTime,
// return Math.max(0, val - startTime) + ' ms';

import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let date_timestr = +new Date();  //任务开始的最小值我这里就用的目前时间
    date_timestr = +new Date('2022/10/19');
    let opacity_Data = [            //隐藏部分的；开始时间的 (几天几小时)
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data = [               //高亮部分的；结束时间的
        1000 * 60 * 60 * 24 * 5,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 100,
        1000 * 60 * 60 * 24 * 50,
    ]

    let opacity_Data2 = [
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data2 = [
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 7,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 55,
    ]
    const formatterTime = (d) => {
        let d_ = new Date(d);
        return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
    }
    let option = {
        grid: {
            containLabel: true,
            right: '10%',
            left: '5%',
            bottom: '6%',
            top: '10%',
        },
        legend: {
            top: "5%",
            data: ['计划时间', '实际时间'],
            selectedMode: false,        //这里禁止点击；需要的自己写事件使用filter动态setOption
            textStyle: {
                fontSize: 12,
                fontWeight: 600
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (ToolFormatterParam) {
                let labels = `<div>
                <b>${ToolFormatterParam[0].name}</b>
            </div>`;
                ToolFormatterParam.map((item) => {
                    let isSeriesNameZero = item.seriesName.includes('0');
                    if (!isSeriesNameZero) {
                        let startTime = ToolFormatterParam.filter((item2) => {
                            if (item2.seriesName.includes((item.seriesName + '0'))) {
                                return item2
                            }
                        })[0].value + date_timestr;
                        let endTime = null;
                        endTime = date_timestr + item.value;
                        let label_item = `<div>${item.seriesName}：${formatterTime(startTime)} 至 ${formatterTime(endTime)}</div>`
                        labels += label_item
                    }
                })
                return labels;
            }
        },
        xAxis: {
            type: 'value',
            minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
            // maxInterval: 1000 * 60 * 60 * 24 * 15,       //最大轴线分割 一天的的值 如果是小时自行修改
            axisLabel: {
                fontSize: 12,
                fontWeight: 600,
                color: '#888',
                formatter: function (val, index) {
                    let date_ = new Date(val + date_timestr);
                    let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
                    return label_;
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                },
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: ['收购痛讯', '亿个小目标', '下一个小目标', '周游世界'],
            axisLabel: {
                color: '#333',
                fontSize: 12,
                fontWeight: 600
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        // k = 0,1 隐藏的；k=1，2高亮的
        color: [
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#4297FE', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#007BFF', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#5198FF', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#8BF8FE', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            }
        ],
        series: [
            {
                //开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
                name: '计划时间0',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                data: opacity_Data
            },
            {
                name: '计划时间',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                data: high_Data
            },


            {
                name: '实际时间0',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0
                },
                barWidth: 24,
                emphasis: {
                    focus: 'series'
                },
                barGap: '10%',
                data: opacity_Data2
            },
            {
                name: '实际时间',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                data: high_Data2
            },
        ],
    };
    myChart.setOption(option);
}

onMounted(() => {
    initChart();
})
</script>

<style lang="less" scoped>
.chart {
    width: 50%;
    height: 500px;
    margin-top: 20px;
}
</style>